<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name ="keywords" content="{{$metakeyword}}">
    <meta name="description" content="{{$metadesp}}">
    <title>{{$data['member']['nickname']}}的直播房间</title>
    <link rel="stylesheet" href="/css/layout.css">
    <link rel="stylesheet" href="/css/lay_icon.css">
    <link rel="stylesheet" href="/css/index.css">
    <link rel="stylesheet" href="/css/radio.css">
    <script src="/js/jquery-3.1.1.js"></script>
    <script src="/js/layer/1.9.3/layer.js"></script>
    <script src="/js/jquery.transit.js"></script>
    <script src="/js/gift.js"></script>
    <link href="/video.js/css/video-js.min.css" rel="stylesheet" type="text/css">
    <script src="/js/nePublisher.js"></script>
    <script>
        var room = "{{$data['num']}}";
        var uid  = "{{!empty($user['ecuid'])?$user['ecuid']:0}}";
        var username = "{{!empty($user['nickname'])?$user['nickname']:0}}";
        var upath = "{{!empty($user['bigpic'])?$user['bigpic']:0}}";
        var isAdmin = "{{!empty($user['isAdmin'])?$user['isAdmin']:0}}";
        var isZhubo = "{{!empty($user['isZhubo'])?$user['isZhubo']:0}}";
        var isLive = '{{$data['isLive']}}';
        var client = 'zhubo';
        var timedown = null;

    </script>
</head>
<body>
<div class="header">
    <div class="logo">
        <a href="">MINI播 <b>bete1.0</b></a>
    </div>
    <div class="l_rt">
        @if($user['islogin']==1)
            <div class="login_user">
                <div class="user_info">
                    <div class="user_icon">
                        <img src="{{$user['bigpic']}}" alt="">
                    </div>
                    <div class="user_name"><a href="/profile">{{$user['username']}}</a></div>
                </div>
                <a href="" style="font-size: 14px">退出</a>
            </div>
        @else
            <a href="javascript:;" onclick="login()">登录</a>
            <a href="javascript:;" onclick="register()">注册</a>
        @endif
    </div>
</div>
<div class="content">
    <div class="setbar">
        <ul>
            <li><a href="/"><i class="home"></i><span>首页</span></a></li>
            <li><a href="/cate/index"><i class="cate"></i><span>分类</span></a></li>
            <li><a href=""><i class="gc"></i><span>广场</span></a></li>
            <li><a href=""><i class="fa"></i><span>Fans</span></a></li>
            <li><i class="hide"></i><span>隐藏</span></li>
        </ul>
    </div>
    <div class="con" style="margin-left: 5px;">
        <div class="con_l">
            <div class="showinfo">
                <div class="face">
                    <img src="{{$data['member']['bigpic']}}" alt="">
                </div>
                <div class="info">
                    <div class="uname">{{$data['title']}}</div>
                    <div class="utype">
                        <span>主播：{{$data['member']['nickname']}}</span> <span><i class="icon_16 level"></i>{{$data['member']['level_zhubo']}}</span> <span>类别:{{$data['cate']['catename']}}</span>
                    </div>
                    <div class="u_details">
                        <span><i class="icon_16 hot"></i>0</span>
                        <span><i class="icon_16 attact"></i>0</span>
                        <span><i class="icon_16 online"></i>0</span>
                    </div>
                </div>
                <div class="live">
                     <div class="live_open" ><a href="JavaScript:;" class="test_video" onclick="testVideo()">调试摄像头</a> 直播开关: <div class="row" style="display: inline-block; vertical-align: top; width: 50px; position: absolute; top: -18px; right: 8px;">
                         <input type="checkbox" id="simple_3">
                         <label for="simple_3" class="green" status="{{$data['isLive']}}" data-num="{{$data['num']}}" onclick="startRoom(this)"></label>
                     </div></div>
                     <div class="live_start">
                         <a href="javascrip:;" class="webpush" onclick="webpush()">web推流</a>
                         <a href="javascrip:;" class="softpush" onclick="showpush()">软件推流</a>
                     </div>
                </div>
            </div>
            <div class="show_paly" style="position: relative;">
                @if($data['isLive']==0)
                <div class="no_start">未开启直播</div>
                @endif
                <div class="video">
                </div>
                <div class="funlist">
                     <div class="f_l">
                          <div class="start_time">
                               我开播的时间
                          </div>
                          <div class="time"><i class="icon_25 time_icon"></i> <span class="t" time="{{$data['livetime']}}">00:00</span> @if($data['isLive']==0)<span class="live_status liveing"> 已休播 </span> @else <span class="live_status liveed">直播中</span> @endif</div>
                     </div>
                     <div class="f_c">
                          <div class="gift_dayic"><i class="icon_20 gift_1"></i> 礼物动态 <span>本次直播获得的礼物收益</span></div>
                          <div class="gift_dayic_list">
                               <ul>
                                   @foreach($gift as $v)
                                   <li id="gift_id_{{$v['id']}}"><b><img src="/{{$v['giftIcon']}}" alt=""></b>{{$v['giftname']}} (<span>{{$v['giftconut']}}</span>)</li>
                                   @endforeach
                               </ul>
                          </div>
                     </div>
                </div>
            </div>
        </div>
        <div class="con_r">
            <div class="bang">
                <div class="bang_item">
                    <span class="active">贡献周榜</span>
                    <span>贵族</span>
                    <span>粉丝团</span>
                </div>
                <div class="bang_con_1" style="display: block;">
                    <div class="bang_tips_i">点击右侧查看总榜 <a href="">查看总榜</a></div>
                    <div class="bangtop">
                        @if (empty($weekdata))
                            <div class="nodata">
                                <div class="nodata_icon"></div>
                                <p>抢位就是你的了</p>
                            </div>
                        @else
                            @foreach($weekdata as $k=>$v)
                                @if($k==1)
                                    <div class="top"><div class="min_top_icon"><img src="{{$v['member']['bigpic']}}" alt="" width="100%" height="100%"></div><p>{{$v['member']['nickname']}}</p></div>
                                @else
                                    @if($v==0)
                                        <div class="top"><div class="min_top_icon"><img src="/images/xuwei.png" alt="" width="100%" height="100%"></div><p>虚位以待</p></div>
                                    @else
                                        <div class="top"><div class="min_top_icon"><img src="{{$v['member']['bigpic']}}" alt="" width="100%" height="100%"></div><p>{{$v['member']['nickname']}}</p></div>
                                    @endif
                                @endif
                            @endforeach
                        @endif
                    </div>
                </div>
                <div class="bang_con_1">
                    <div class="bang_tips_i"></div>
                </div>
                <div class="bang_con_1">
                    <div class="bang_tips_i"></div>
                    <div class="bangtop">
                        @if (empty($fansToplist))
                            <div class="nodata">
                                <div class="nodata_icon"></div>
                                <p>抢位就是你的了</p>
                            </div>
                        @else
                            @foreach($fansToplist as $k=>$v)
                                @if($k==1)
                                    <div class="top"><div class="min_top_icon"><img src="{{$v['member']['bigpic']}}" alt="" width="100%" height="100%"></div><p>{{$v['member']['nickname']}}</p></div>
                                @else
                                    @if($v==0)
                                        <div class="top"><div class="min_top_icon"><img src="/images/xuwei.png" alt="" width="100%" height="100%"></div><p>虚位以待</p></div>
                                    @else
                                        <div class="top"><div class="min_top_icon"><img src="{{$v['member']['bigpic']}}" alt="" width="100%" height="100%"></div><p>{{$v['member']['nickname']}}</p></div>
                                    @endif
                                @endif
                            @endforeach
                        @endif
                    </div>
                </div>
            </div>
            <div class="dmbox" id="danmbox">
                <div class="dmbox_p"><span class="u_name">三三九户外</span> <span style="color:#3a87ad;">我等你一百年</span></div>
                <div class="dmbox_p"><span class="u_name">豆豆</span> <span style="color: #666;">欢迎来到本直播间</span></div>
            </div>
            <div class="send">
                <div class="send_text"><span class="fs"><i>未拥有</i></span><input type="text" id="mess" placeholder="说点什么吧"><input
                            type="submit" value="发送" id="sub"></div>
            </div>
        </div>
    </div>
</div>
<div class="footer"></div>
<div class="windowlayout" id="push" style="display: none;">
    <div class="windowDiag" style="width:500px;">
        <div class="w_title">直播推流地址 <a href="" class="w_close"></a></div>
        <div class="w_form">
             <div class="p_tips">此推流方式仅适用于OBS xspilt 等直播推流软件,进行推流。</div>
             <div class="w_row">
                  <span>FMS URL</span>
                 <input type="text" value="rtmp://3891.livepush.myqcloud.com/live/">
                 <a href="javascript:;">复制</a>
             </div>
             <div class="w_row">
                <span>串流码</span>
                 <input type="text" value="3891_test?bizid=3891&txSecret=xxx&txTime=58540F7F">
                 <a href="javascript:;">复制</a>
             </div>
        </div>
        <div class="w_form_sub">
            <input type="submit" class="confim" onclick="closepush()" value="确定">
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" src="/js/roomwebsocket.js"></script>
<script>

    function initpush(pushurl) {
        var pushinput = document.getElementsByClassName('w_form')[0].getElementsByTagName('input');
        pushUrl = pushurl.split('?');
        pushinput[0].value = pushUrl[0];
        pushinput[1].value = pushUrl[1];
    }

    // 开始计时
    function startTimeDown() {
        timedown = setInterval(function () {
            var time = document.getElementsByClassName('t')[0];
            var t = parseInt(time.getAttribute('time'));
            console.log(t);
            t+=1;
            time.setAttribute('time',t);
            // 格式化时间 00:00;
            times = data_format(t);
            time.innerHTML = times;
        },1000)
    }

    //补零函数
    function fill_zero(num){
        if(num<=9){
            return "0"+num;
        }else{
            return ""+num;
        }
    }

    //时间格式化函数
    function data_format(time){
        var h,s,m,remain;
        h= fill_zero(parseInt(time/3600));
        remain = time%3600;
        m = fill_zero(parseInt(remain/60));
        remain = fill_zero(parseInt(remain%60));
        s = remain;
        return h+":"+m+":"+s;
    }

    var webPush = localStorage.getItem('isWebPush');
    var video = document.getElementsByClassName('video')[0];
    if (isLive == 1) {
        if (webPush == 1) {
            video.innerHTML = '<div id="my-publisher"></div>';
            var myPublisher = new nePublisher(
                'my-publisher', // String 必选 推流器容器id
                {   // Object 可选 推流初始化videoOptions参数
                    videoWidth: 640,    // Number 可选 推流分辨率 宽度 default 640
                    videoHeight: 480,   // Number 可选 推流分辨率 高度 default 480
                    fps: 15,            // Number 可选 推流帧率 default 15
                    bitrate: 600,       // Number 可选 推流码率 default 600
                    video: true,       // Boolean 可选 是否推流视频 default true
                    audio: true       // Boolean 可选 是否推流音频 default true
                }, { // Object 可选 推流初始化flashOptions参数
                    previewWindowWidth: 1150,    // Number 可选 预览窗口宽度 default 862
                    previewWindowHeight: 600,   // Number 可选 预览窗口高度 default 446
                    wmode: 'transparent',       // String 可选 flash显示模式 default transparent
                    quality: 'high',            // String 可选 flash质量 default high
                    allowScriptAccess: 'always' // String 可选 flash跨域允许 default always
                }, function () {
                    /*
                        function 可选 初始化成功的回调函数
                        可在该回调中调用getCameraList和getMicroPhoneList方法获取 摄像头和麦克风列表
                        cameraList = this.getCameraList();
                        microPhoneList = this.getMicroPhoneList();
                    */
                    cameraList = this.getCameraList();
                    microPhoneList = this.getMicroPhoneList();
                    console.log(cameraList);
                    console.log(microPhoneList);

                }, function (code, desc) {
                    /*
                        function 可选 初始化失败后的回调函数
                        @param code 错误代码
                        @param desc 错误信息
                        判断是否有错误代码传入检查初始化时是否发生错误
                        若有错误可进行相应的错误提示
                    */
                    console.log(code);
                    console.log(desc);
                });
                var pushUrl = "{{$data['pushur']}}";

                initpush(pushUrl);
                myPublisher.setCamera(0) //功能：设置推流摄像头 参数：
                myPublisher.setMicroPhone(0); // 功能：设置推流麦克风
//       myPublisher.startPublish( // 开始推流
//        data['pushurl'],
//        {
//            videoWidth: 700,
//            videoHeight: 400,
//            fps: 15,
//            bitrate: 600,
//        }, function(code, desc) {
//            // 推流错误时触发
//        });
        } else {
            // 软件推流 拉流显示
            var playUrl = "{{$data['playurl'][0]}}";
            videoHtml = '<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" poster="videojs/eguidlogo.png" style="width: 100%!important; height: 400px;"><source src="' + playUrl + '" type="rtmp/flv"/></video>';
            video.innerHTML = videoHtml;
        }
        startTimeDown();
    }else{
        video.innerHTML = '<div id="my-publisher"></div>';
        var myPublisher = new nePublisher(
            'my-publisher', // String 必选 推流器容器id
            {   // Object 可选 推流初始化videoOptions参数
                videoWidth: 640,    // Number 可选 推流分辨率 宽度 default 640
                videoHeight: 480,   // Number 可选 推流分辨率 高度 default 480
                fps: 15,            // Number 可选 推流帧率 default 15
                bitrate: 600,       // Number 可选 推流码率 default 600
                video: true,       // Boolean 可选 是否推流视频 default true
                audio: true       // Boolean 可选 是否推流音频 default true
            }, { // Object 可选 推流初始化flashOptions参数
                previewWindowWidth: 1150,    // Number 可选 预览窗口宽度 default 862
                previewWindowHeight: 600,   // Number 可选 预览窗口高度 default 446
                wmode: 'transparent',       // String 可选 flash显示模式 default transparent
                quality: 'high',            // String 可选 flash质量 default high
                allowScriptAccess: 'always' // String 可选 flash跨域允许 default always
            }, function () {
                /*
                    function 可选 初始化成功的回调函数
                    可在该回调中调用getCameraList和getMicroPhoneList方法获取 摄像头和麦克风列表
                    cameraList = this.getCameraList();
                    microPhoneList = this.getMicroPhoneList();
                */
                cameraList = this.getCameraList();
                microPhoneList = this.getMicroPhoneList();
                console.log(cameraList);
                console.log(microPhoneList);

            }, function (code, desc) {
                /*
                    function 可选 初始化失败后的回调函数
                    @param code 错误代码
                    @param desc 错误信息
                    判断是否有错误代码传入检查初始化时是否发生错误
                    若有错误可进行相应的错误提示
                */
                console.log(code);
                console.log(desc);
            });
    }
</script>
<script type="text/javascript" src="/js/roomCotroller.js"></script>
